<style type="text/css">
    #allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 10px;
        font-family: "微软雅黑";
    }
</style>
<style type="text/css">
    #allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        font-family: "微软雅黑";
    }
</style>

<title>路径规划</title>
<div style="height: 50px;line-height: 50px;margin: 10px;border-bottom: 1px solid white">
    切换路线: <select id="customs" onchange="selectPath()" style="margin-left: 5px;height: 30px;width: 300px;">
    <option>--请选择--</option>
    #foreach($p in $path)
    <option value='$p.points'>$p.path</option>
    #end
</select>
    <span style="margin-left: 15px;"> 显示订单:</span>
    <div class="checkbox-custom checkbox-danger" style="display: inline">
        <input type="checkbox" id="heatMap" style="line-height: 30px;" checked onclick="switchHeatMap()"><label
            for="heatMap"> </label>
    </div>
    <div style="float: right">

    </div>
</div>
<div id="allmap"></div>

</html>
<script type="text/javascript">
    function selectPath() {
        map.clearOverlays();
        var nodes = JSON.parse($("#customs").val());
        var start = createPoint(121.469247, 31.060548, "景禧医纺");
        var end = null;
        var waypoints = [];
        var point2 = createPoint(nodes[0].lng, nodes[0].lat, nodes[0].name);
        end = point2
        if (nodes.length > 1) {
            var point3 = createPoint(nodes[1].lng, nodes[1].lat, nodes[1].name);
            end = point3;
            waypoints[0] = point2;
        }
        if (nodes.length > 2) {
            var point4 = createPoint(nodes[2].lng, nodes[2].lat, nodes[2].name);
            end = point4;
            waypoints[1] = point3;
        }
        transit.search(start, end, {waypoints: waypoints});
    }
    //创建和初始化地图函数：
    function initMap() {
        createMap();//创建地图
        setMapEvent();//设置地图事件
    }
    //创建地图函数
    function createMap() {
        var map = new BMap.Map("allmap");//在百度地图容器中创建一个地图
        var point = new BMap.Point(121.446235, 31.169152);//定义一个中心点坐标
//        var point = new BMap.Point(116.418261, 39.921984);//定义一个中心点坐标
        map.centerAndZoom(point, 13);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
        map.setMapStyle({
            styleJson: [
                {
                    "featureType": "highway",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "subway",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "railway",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "local",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                }
            ]
        });
    }

    //地图事件设置函数：
    function setMapEvent() {
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }

    function createDrivingRoute() {
        var transit = new BMap.DrivingRoute(map, {
            renderOptions: {map: map},
            onMarkersSet: function (routes) {
                for (var i = 0; i < routes.length; i++) {
                    map.removeOverlay(routes[i].marker ? routes[i].marker : routes[i].Km);
                }
            }
        });

        window.transit = transit;//将map变量存储在全局
//        var point1 = createPoint(121.469247, 31.060548, "景禧医纺");
//        var point2 = createPoint(121.5191383638, 31.2435388091, "上海东方医院");
//        var point3 = createPoint(121.5203900415, 31.1541048664, "上海东方南院");
//        for (var i = 0; i < points.length; i++) {
//            var pointS = new BMap.Point(points[i].lat, points[i].lng);
//            var marker = new BMap.Marker(pointS);  // 创建标注
//            map.addOverlay(marker);              // 将标注添加到地图中
//            var opts = {
//                width: 100,     // 信息窗口宽度
//                height: 20,     // 信息窗口高度
//                title: points[i].title // 信息窗口标题
//            };
//            var infoWindow = new BMap.InfoWindow("", opts);  // 创建信息窗口对象
//            marker.addEventListener("click", function () {
//                map.openInfoWindow(infoWindow, pointS); //开启信息窗口
//            });
//            for (var j = 0; j < points.length; j++) {
//                if (i == j)continue;
//                transit.search(pointS, new BMap.Point(points[j].lat, points[j].lng))
//            }
//        }
//        transit.search(point1, point2, {waypoints: [point3]});
//        transit.search(point3, point2, BMAP_DRIVING_POLICY_LEAST_DISTANCE);
    }
    function createPoint(lng, lat, content) {
        var point = new BMap.Point(lng, lat);
        var marker = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中
        var opts = {
            width: 100,     // 信息窗口宽度
            height: 20,     // 信息窗口高度
            title: content // 信息窗口标题
        };
        var infoWindow = new BMap.InfoWindow("", opts);  // 创建信息窗口对象
        marker.addEventListener("click", function () {
            map.openInfoWindow(infoWindow, point); //开启信息窗口
        });
        return point;
    }
    function switchHeatMap() {
        if ($('#heatMap').is(':checked')) {
            createHeatMap();
        }else {
            heatmapOverlay.hide();
        }
    }
    function createHeatMap() {
        if (!isSupportCanvas()) {
            alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
        }
        map.clearOverlays();
        $.ajax({
            url: "#springUrl('/network/city/heatMap')",
            data: {},
            type: "POST",
            success: function (text) {
                var d = JSON.parse(text);
                if (d.success && d.data) {
                    heatmapOverlay = new BMapLib.HeatmapOverlay({"radius": 25});
                    map.addOverlay(heatmapOverlay);
                    heatmapOverlay.setDataSet({data: d.data, max: 100});
                    for (var i = 0; i < d.data.length; i++) {
                        createMaker(d.data[i].lng, d.data[i].lat, d.data[i].nodeName + "," + d.data[i].count);
                    }

                    //是否显示热力图
                    function openHeatmap() {
                        heatmapOverlay.show();
                    }

                    function closeHeatmap() {
                        heatmapOverlay.hide();
                    }
                }
            }
        });
//        var points = [
//            #foreach($node in $nodeList)
//            { "lng" : $node.lng, "lat" : $node.lat, "count" : $node.count  } ,
//            #end
//        ] ;
//        closeHeatmap();
        //判断浏览区是否支持canvas
        function isSupportCanvas() {
            var elem = document.createElement('canvas');
            return !!(elem.getContext && elem.getContext('2d'));
        }
    }
    function createMaker(lng, lat, title) {
        var icon = new BMap.Icon('http://api0.map.bdimg.com/images/blank.gif', new BMap.Size(30, 30));
        var marker = new BMap.Marker(new BMap.Point(lng, lat), {icon: icon});  // 创建标注点
        var label = new BMap.Label(title, {offset: new BMap.Size(20, -10)});
        label.setStyle({
            color: "red",
            fontSize: "14px",
            height: "20px",
            lineHeight: "20px",
            fontFamily: "微软雅黑",
            display: "none"  //给label设置样式，任意的CSS都是可以的
        });
        marker.setLabel(label);

        marker.addEventListener("mouseover", function () {
            label.setStyle({    //给label设置样式，任意的CSS都是可以的
                display: "block"
            });

        });
        marker.addEventListener("mouseout", function () {
            label.setStyle({    //给label设置样式，任意的CSS都是可以的
                display: "none"
            });
        });
        map.addOverlay(marker);
    }

    jQuery(document).ready(function () {
        jQuery("#allmap").css("height", window.innerHeight - 180);
        initMap();//创建和初始化地图

        createDrivingRoute();
        createHeatMap();
        //    #foreach($node in $nodeList)
        //    createMaker($node.lng, $node.lat, "$node.nodeName $node.count");
        //    #end
        createMaker();
    });
</script>

